<template>
  <div>
    <div class="content">
      <div class="tip">保存后即生效，页面会立即更新</div>
      <el-tabs type="border-card">
        <el-tab-pane label="企业基本信息">
          <el-form :model="infoData" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="企业号" prop="id">
              <el-input v-model="infoData.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="企业名称" prop="name">
              <el-input v-model="infoData.name"></el-input>
            </el-form-item>
            <el-form-item label="企业联系人" prop="contact">
              <el-input v-model="infoData.contact"></el-input>
            </el-form-item>
            <el-form-item label="公司电话" prop="phone">
              <el-input v-model="infoData.phone"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件" prop="name">
              <el-input v-model="infoData.email"></el-input>
            </el-form-item>
            <el-form-item label="通讯地址" prop="name">
              <el-input v-model="infoData.address"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码" prop="name">
              <el-input v-model="infoData.code"></el-input>
            </el-form-item>
            <el-form-item label="企业官网" prop="name">
              <el-input v-model="infoData.website"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="企业标识">
          <el-form :model="infoData" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="企业LOGO" prop="name">
              <el-input v-model="infoData.logo" ></el-input>
            </el-form-item>
            <el-form-item label="系统名称" prop="name">
              <el-input v-model="infoData.systemName"></el-input>
            </el-form-item>
            <el-form-item label="技术支持" prop="name">
              <el-input v-model="infoData.techSupport"></el-input>
            </el-form-item>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>

</template>
<script>
export default {
  name: 'enterprise',
  data () {
    return {
      infoData: {
        id: 'xxx',
        name: 'xxx',
        contact: '',
        phone: '',
        email: '',
        address: '',
        code: '',
        website: '',
        logo: '',
        systemName: '',
        techSupport: ''
      },
      rules: {
        id: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>
<style lang="stylus" scoped>
.content {
  padding: 0 20px;
}
.tip {
  margin-top: 20px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #bfcbd9;
  border-color: #c4c4c4;
  color: #1f2d3d;
  box-sizing: border-box;
  outline: none;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.el-tabs {
  margin-top:20px;
}
</style>
